.plugin-pie-menu {
    position: fixed;
    left: 50vw;
    top: 50vh;
    width: var(--menu-circle-size);
    height: var(--menu-circle-size);
    transform: rotate(var(--menu-rotate));
    z-index: 9998;
    cursor: pointer;
    transition: transform 0.15s;
    user-select: none;

    --menu-rotate: 0deg;
    --menu-circle-size: 56px;
    --menu-inner-size: 205px;
    --menu-outer-size: 310px;
    --menu-icon-size: 34px;
    --menu-item-radius: 165px;
    --menu-background-color: #fafafa;
    --menu-background-zebra-color: #f3f2ee;
    --menu-border-color: #ccc;
    --menu-hover-color: #ccc;
    --menu-icon-color: #999;
}

.plugin-pie-menu-circle {
    position: absolute;
    width: var(--menu-circle-size);
    height: var(--menu-circle-size);
    border-width: 2px;
    border-style: dashed;
    border-color: var(--menu-border-color);
    border-radius: 50%;
    background-color: var(--menu-background-color);
    transition: all 0.15s;
}

.plugin-pie-menu-inner {
    z-index: 1;
}

.plugin-pie-menu-solid {
    z-index: 2;
}

.plugin-pie-menu-inner,
.plugin-pie-menu-outer {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.plugin-pie-menu.pin-menu .plugin-pie-menu-solid {
    background-color: var(--menu-border-color);
}

.plugin-pie-menu.expand-menu > .plugin-pie-menu-circle {
    border-style: solid;
}

.plugin-pie-menu.expand-menu .plugin-pie-menu-inner,
.plugin-pie-menu:hover .plugin-pie-menu-inner {
    width: var(--menu-inner-size);
    height: var(--menu-inner-size);
}

.plugin-pie-menu.expand-menu .plugin-pie-menu-outer,
.plugin-pie-menu:hover .plugin-pie-menu-outer {
    width: var(--menu-outer-size);
    height: var(--menu-outer-size);
}

.plugin-pie-menu-item {
    width: var(--menu-item-radius);
    height: var(--menu-item-radius);
    border: 1px solid var(--menu-border-color);
    display: flex;
    justify-content: flex-end;
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: bottom right;
    transform: translate(-100%, -100%) rotate(var(--menu-item-rotate)) skew(30deg, 15deg);
}

.plugin-pie-menu .plugin-pie-menu-item:hover {
    background-color: var(--menu-hover-color);
}

.plugin-pie-menu-item:nth-child(even) {
    background-color: var(--menu-background-zebra-color);
}

.plugin-pie-menu-item:nth-child(1) {
    --menu-item-rotate: 75deg;
}

.plugin-pie-menu-item:nth-child(2) {
    --menu-item-rotate: 120deg;
}

.plugin-pie-menu-item:nth-child(3) {
    --menu-item-rotate: 165deg;
}

.plugin-pie-menu-item:nth-child(4) {
    --menu-item-rotate: 210deg;
}

.plugin-pie-menu-item:nth-child(5) {
    --menu-item-rotate: 255deg;
}

.plugin-pie-menu-item:nth-child(6) {
    --menu-item-rotate: 300deg;
}

.plugin-pie-menu-item:nth-child(7) {
    --menu-item-rotate: 345deg;
}

.plugin-pie-menu-item:nth-child(8) {
    --menu-item-rotate: 390deg;
}

.plugin-pie-menu-item-text-inner,
.plugin-pie-menu-item-text-outer {
    display: flex;
    justify-content: center;
    width: 0;
    font-size: var(--menu-icon-size);
    transform-origin: bottom right;
    transform: skew(-30deg, -15deg) rotate(-50deg);
    color: var(--menu-icon-color);
}

.plugin-pie-menu-item-text-inner {
    align-items: center;
}
